<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】设置背景颜色
			        2.product_card 设置样式：内边距，边框设置颜色，加倒角
					加阴影，所有内容--居中：text-align:centen
					3.图片边框倒角，外边距？
					4.小米  SU7  文字：外边距？
					5.￥279999.00 文字大小，外边距？
					6.颜色，外边距？内边距？
			 */
			div{
				margin-left: 50px;
				width: 260px;
				height: 600px;
				box-shadow: 5px 5px 50px 10px #b2b2b2;
			}
			#product_card{
				margin: 10px;
				padding: 10px;
				border-radius: 1%;
			}
			img{
				border-radius: 1%;
			}
			h3{
				margin-left: 100px;
			}
			p{
				color: red;
				font-size: 20px;
				font-weight: bold;
				margin-left: 60px;
			}
			h6{
				font-size: 9px;
				margin-left: 85px;
				color: #b8b8bb;
			}
			span{
				margin: 0px 5px;
			}
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/su7_海报.jpg" alt="su7" width="260px" height="358px" >
			<h3>小米su7</h3>
			<p>￥279999.00</p>
			<h6>已有<span>10万+</span>人评价</h6>
	</body>
</html>